<template>
  <view class="bg-gray-50 min-h-screen w-[750rpx] box-border">
    <!-- Header -->
    <view class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-[40rpx] text-center relative overflow-hidden">
      <!-- 返回按钮 -->
      <view class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer" @click="goBack">
        <IconFont font-class-name="iconfont" class-prefix="icon" name="left" size="20" color="#ffffff" />
      </view>
      <view class="absolute w-[300rpx] h-[300rpx] bg-white bg-opacity-10 rounded-full -top-[100rpx] -right-[80rpx]"> </view>
      <view class="absolute w-[200rpx] h-[200rpx] bg-white bg-opacity-8 rounded-full -bottom-[80rpx] -left-[60rpx]"> </view>

      <text class="text-[42rpx] font-bold mb-[10rpx] block relative z-2">成为平台商家</text>
      <text class="text-[26rpx] opacity-90 relative z-2">开启您的商业之旅，共享平台资源</text>

      <view class="flex justify-between px-[50rpx] mt-[40rpx] relative z-10">
        <view
          v-for="(step, index) in steps"
          :key="index"
          class="bg-white rounded-[20rpx] p-[20rpx] w-[170rpx] text-center shadow-lg relative z-2"
          :class="step.active ? 'bg-blue-600 text-white' : 'text-gray-800'"
        >
          <IconFont font-class-name="iconfont" class-prefix="icon" :name="step.icon" size="30" color="#fff" />
          <text class="text-[24rpx] font-medium">{{ step.title }}</text>
        </view>
      </view>
    </view>

    <view class="p-[50rpx]">
      <!-- 商家类型选择 -->
      <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-lg mb-[50rpx] border border-gray-100">
        <view class="text-[32rpx] text-blue-600 mb-[30rpx] pb-[15rpx] border-b-2 border-blue-50 flex items-center">
          <view class="w-[50rpx] h-[50rpx] bg-blue-50 rounded-full flex items-center justify-center mr-[15rpx]">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="shangjia" size="20" color="#4a6bff" />
          </view>
          <text>选择商家类型</text>
        </view>

        <view class="flex flex-wrap gap-[30rpx]">
          <view
            v-for="(type, index) in merchantTypes"
            :key="index"
            class="flex-1 min-w-[200rpx] border-2 rounded-[20rpx] p-[30rpx] text-center cursor-pointer transition-all relative overflow-hidden"
            :class="selectedType === type.value ? 'border-blue-600 bg-blue-50' : 'border-gray-200'"
            @click="selectType(type.value)"
          >
            <view v-if="selectedType === type.value" class="absolute top-[10rpx] right-[10rpx] w-[30rpx] h-[30rpx] bg-blue-600 text-white rounded-full flex items-center justify-center text-[20rpx]">
              ✓
            </view>
            <IconFont font-class-name="iconfont" class-prefix="icon" :name="type.icon" size="30" color="#4a6bff" />
            <text class="text-[32rpx] font-semibold mb-[10rpx] block">{{ type.name }}</text>
            <text class="text-[24rpx] text-gray-600">{{ type.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 商家信息 -->
      <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-lg mb-[50rpx] border border-gray-100">
        <view class="text-[32rpx] text-blue-600 mb-[30rpx] pb-[15rpx] border-b-2 border-blue-50 flex items-center">
          <view class="w-[50rpx] h-[50rpx] bg-blue-50 rounded-full flex items-center justify-center mr-[15rpx]">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="xinxiinfo21" size="20" color="#4a6bff" />
          </view>
          <text>商家信息</text>
        </view>

        <nut-form ref="formRef" :model="formData">
          <!-- 选择行业 -->
          <view class="mb-[40rpx]">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]"> 选择行业 <text class="text-red-500">*</text> </text>
            <view class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50" @click="showIndustryPicker = true">
              {{ getIndustryText(formData.industry) || "请选择所属行业" }}
            </view>
            <nut-popup v-model:visible="showIndustryPicker" position="bottom" round>
              <nut-picker v-model="industryValue" :columns="industryOptions" title="选择所属行业" @confirm="onIndustryConfirm" @cancel="showIndustryPicker = false" />
            </nut-popup>
          </view>

          <!-- 服务范围 -->
          <view class="mb-[40rpx]">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]"> 服务范围 <text class="text-red-500">*</text> </text>
            <textarea
              v-model="formData.serviceScope"
              placeholder="请详细描述您的服务范围、服务区域及服务内容"
              class="w-full p-[25rpx] text-[26rpx] border-2 border-gray-200 rounded-[15rpx] bg-gray-50 min-h-[200rpx]"
            />
          </view>

          <!-- 上传营业执照 -->
          <view class="mb-[40rpx]">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]"> 上传营业执照 <text class="text-red-500">*</text> </text>
            <view
              class="border-2 border-dashed border-gray-200 rounded-[15rpx] p-[40rpx] text-center bg-gray-50 cursor-pointer transition-all"
              :class="uploadedLicense ? 'border-blue-600 bg-blue-50' : 'hover:border-blue-600 hover:bg-blue-50'"
              @click="uploadLicense"
            >
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                :name="uploadedLicense ? 'file-image' : 'tubiao-yunshangchuan'"
                class="text-[50rpx] mb-[20rpx]"
                :class="uploadedLicense ? 'text-green-500' : 'text-blue-600'"
                size="40"
                color="#4a6bff"
              />
              <text class="text-[26rpx] text-gray-600 block">
                {{ uploadedLicense ? "营业执照已上传" : "点击上传营业执照" }}
              </text>
              <text class="text-[22rpx] text-gray-500 mt-[15rpx] block">
                {{ uploadedLicense ? "点击可重新上传" : "支持 JPG、PNG 格式，大小不超过 5MB" }}
              </text>
            </view>
          </view>

          <!-- 上传身份证 -->
          <view class="mb-[40rpx]">
            <text class="block text-[28rpx] font-medium text-gray-700 mb-[15rpx]"> 上传身份证 <text class="text-red-500">*</text> </text>
            <view
              class="border-2 border-dashed border-gray-200 rounded-[15rpx] p-[40rpx] text-center bg-gray-50 cursor-pointer transition-all"
              :class="uploadedIdCard ? 'border-blue-600 bg-blue-50' : 'hover:border-blue-600 hover:bg-blue-50'"
              @click="uploadIdCard"
            >
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                :name="uploadedIdCard ? 'file-image' : 'gengxinshenfenzhengxinxi'"
                class="text-[50rpx] mb-[20rpx]"
                :class="uploadedIdCard ? 'text-green-500' : 'text-blue-600'"
                size="50"
                color="#4a6bff"
              />
              <text class="text-[26rpx] text-gray-600 block">
                {{ uploadedIdCard ? "身份证已上传" : "点击上传身份证正反面" }}
              </text>
              <text class="text-[22rpx] text-gray-500 mt-[15rpx] block">
                {{ uploadedIdCard ? "点击可重新上传" : "请确保身份证信息清晰可见" }}
              </text>
            </view>
          </view>

          <!-- 押金说明 -->
          <view class="bg-blue-50 rounded-[15rpx] p-[30rpx] mb-[40rpx]">
            <view class="text-[28rpx] font-semibold mb-[15rpx] text-blue-600">押金规则说明</view>
            <view class="text-[24rpx] leading-[1.8]">
              <view class="mb-[10rpx] ml-[30rpx] relative">
                <text class="absolute left-[-20rpx]">•</text>
                <text>需缴纳平台保证金：<text class="font-bold">¥5,000</text></text>
              </view>
              <view class="mb-[10rpx] ml-[30rpx] relative">
                <text class="absolute left-[-20rpx]">•</text>
                <text>审核不通过时，押金将在3-5个工作日内原路退回</text>
              </view>
              <view class="mb-[10rpx] ml-[30rpx] relative">
                <text class="absolute left-[-20rpx]">•</text>
                <text>合作期间如无违规行为，保证金在退出平台时全额退还</text>
              </view>
              <view class="ml-[30rpx] relative">
                <text class="absolute left-[-20rpx]">•</text>
                <text>保证金用于保障平台用户权益和服务质量</text>
              </view>
            </view>
          </view>
        </nut-form>
      </view>

      <!-- 提交按钮 -->
      <nut-button type="primary" size="large" class="w-full text-[32rpx] font-semibold bg-gradient-to-r from-blue-600 to-purple-600 h-[96rpx]" @click="handleSubmit"> 提交审核 </nut-button>
    </view>

    <!-- Footer -->
    <view class="text-center p-[30rpx] text-gray-500 text-[24rpx]">
      <text>© 2023 平台商家入驻中心 | 客服电话: 400-888-8888</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { BASE_URL } from "@/utils/request";

// 步骤
const steps = ref([
  { title: "选择类型", icon: "service-provider_fill", active: true },
  { title: "填写资料", icon: "file-alt", active: false },
  { title: "完成提交", icon: "check-circle", active: false },
]);

// 商家类型
const merchantTypes = ref([
  {
    value: "service",
    name: "服务商",
    desc: "提供专业服务解决方案",
    icon: "canyin",
  },
  {
    value: "training",
    name: "培训商",
    desc: "提供专业培训与指导",
    icon: "peixunguanli",
  },
  {
    value: "heritage",
    name: "传承商",
    desc: "传统文化与技艺传承",
    icon: "a-xintuobeifen2",
  },
  {
    value: "supplier",
    name: "供应商",
    desc: "提供优质产品与货源",
    icon: "gongyingshang",
  },
]);

// 行业选项
const industryOptions = ref([
  { text: "教育培训", value: "education" },
  { text: "科技创新", value: "tech" },
  { text: "文化传承", value: "culture" },
  { text: "健康医疗", value: "health" },
  { text: "零售电商", value: "retail" },
  { text: "其他行业", value: "other" },
]);

// 表单数据
const formData = reactive({
  industry: "",
  serviceScope: "",
});

// 状态
const selectedType = ref("training");
const uploadedLicense = ref(false);
const uploadedIdCard = ref(false);

// 选择类型
const selectType = (type: string) => {
  selectedType.value = type;
};

// 上传营业执照
const uploadLicense = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: async (res) => {
      console.log(res);
      Taro.showLoading({ title: "上传中..." });
      const uploadRes = await Taro.uploadFile({
        url: "/file/upload",
        filePath: res.tempFilePaths[0],
        name: "file",
        header: {
          token: Taro.getStorageSync("token"),
        },
      });
      Taro.hideLoading();
      const data = JSON.parse(uploadRes.data);
      console.log(data);
    },
  });
  // uploadedLicense.value = true;
  // Taro.showToast({
  //   title: "营业执照上传成功",
  //   icon: "success",
  // });
};

// 上传身份证
const uploadIdCard = () => {
  uploadedIdCard.value = true;
  Taro.showToast({
    title: "身份证上传成功",
    icon: "success",
  });
};

// 提交表单
const handleSubmit = () => {
  if (!formData.industry) {
    Taro.showToast({
      title: "请选择所属行业",
      icon: "none",
    });
    return;
  }

  if (!formData.serviceScope) {
    Taro.showToast({
      title: "请填写服务范围",
      icon: "none",
    });
    return;
  }

  if (!uploadedLicense.value) {
    Taro.showToast({
      title: "请上传营业执照",
      icon: "none",
    });
    return;
  }

  if (!uploadedIdCard.value) {
    Taro.showToast({
      title: "请上传身份证",
      icon: "none",
    });
    return;
  }

  Taro.showToast({
    title: "提交成功！\n您的申请已进入审核流程，我们将在3-5个工作日内完成审核。",
    icon: "success",
    duration: 3000,
  });
};

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const showIndustryPicker = ref(false);
const industryValue = ref<string[]>([]);
function onIndustryConfirm(val: any) {
  showIndustryPicker.value = false;
  formData.industry = val[0]?.value || "";
}
function getIndustryText(val: string) {
  const found = industryOptions.value.find((item: any) => item.value === val);
  return found ? found.text : "";
}
</script>
